<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box" v-test.a.b="message.length">
			<div v-atest="message">
				{{message}}
			</div>
			<div v-btest.a.b="true">
				{{message}}
			</div>
			<div v-my-text="message">
				{{message}}
			</div>
		</div>
	</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
	//自定义属性Vue.directive()写在实例之前
	//参数1：指令的名字
	//参数2：实现指令的函数
	Vue.directive("test",(...rest)=>{
		console.log(rest)
	});
	Vue.directive("atest",(dom,info)=>{
		console.log(dom);
		console.log(info);
	});
	Vue.directive("btest",(dom,{value,modifiers})=>{
		console.log(dom);//dom结构
		console.log(value);//v-btest="这里面的值",value可为：vue实例里data的值||boolean值||string||number||运算符
		console.log(modifiers);//修饰符{a:true,b:true}
	});
	//相当于v-text
	Vue.directive("my-text",(dom,{value})=>{
		dom.innerText = value;
	});
	var vm = new Vue({
		el:"#box",
		data:{
			message:"hello"
		}
	});
</script>